<template>
	<view class="container">
		<cu-custom isBack isFixed bgColor="bg-white">
			<block slot="content">福筑家来会员计划</block>
		</cu-custom>
		<view class="flex justify-between align-center padding-lr" :style="{ paddingTop: CustomBar + 30 + 'px' }">
			<view class="flex">
				<image class="cu-avatar round lg" src="/static/img/none.png" mode="aspectFit"></image>
				<view class="margin-left-sm flex flex-direction justify-between padding-bottom-xs">
					<view class="text-xl">18888888888</view>
					<view class="text-gray">欢迎来到福筑家来~</view>
				</view>
			</view>	
			<button class="cu-btn round bg-orange">开通会员</button>
		</view>
		<view class="rights-box">
			<view class="rights-title">
				<view class="front">
					VIP专享五大特权
				</view>
				<view class="back"></view>
			</view>
			<view class="rights-list">
				<view class="rights-item">
					<image class="icon" src="/static/img/none.png" mode="widthFix"></image>
					<view class="flex flex-direction align-center margin-top-xs">
						<text>材料升级</text>
						<text class="text-sm text-orange">材料免费升级</text>
					</view>
				</view>
				<view class="rights-item">
					<image class="icon" src="/static/img/none.png" mode="widthFix"></image>
					<view class="flex flex-direction align-center margin-top-xs">
						<text>材料升级</text>
						<text class="text-sm text-orange">材料免费升级</text>
					</view>
				</view>
				<view class="rights-item">
					<image class="icon" src="/static/img/none.png" mode="widthFix"></image>
					<view class="flex flex-direction align-center margin-top-xs">
						<text>材料升级</text>
						<text class="text-sm text-orange">材料免费升级</text>
					</view>
				</view>
				<view class="rights-item">
					<image class="icon" src="/static/img/none.png" mode="widthFix"></image>
					<view class="flex flex-direction align-center margin-top-xs">
						<text>材料升级</text>
						<text class="text-sm text-orange">材料免费升级</text>
					</view>
				</view>
				<view class="rights-item">
					<image class="icon" src="/static/img/none.png" mode="widthFix"></image>
					<view class="flex flex-direction align-center margin-top-xs">
						<text>材料升级</text>
						<text class="text-sm text-orange">材料免费升级</text>
					</view>
				</view>
				<view class="rights-item flex flex-direction justify-center">
					<view class="flex flex-direction align-center margin-top-xs text-lg">
						<text>更多权益</text>
						<text>敬请期待</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="unshrink">
				<view class="text-orange">
					<text class="text-sl">9.9</text>
					<text>元/年</text>
				</view>
				<view class="text-gray text-sm text-through">
					<text>原价</text>
					<text>128元/年</text>
				</view>
			</view>
			<view class="margin-left flex-sub flex flex-direction">
				<button class="cu-btn bg-orange round lg">立即开通</button>
				<view class="text-sm text-center padding-lr margin-top-xs text-gray">
					首次开通，仅需9.9，立享每年3980优惠开通即代表同意《福筑家来超级会员服务》
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
			}
		}
	}
</script>

<style scoped>
	.rights-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 160rpx 30rpx 0rpx;
	}
	.rights-title {
		position: relative;
	}
	.rights-title .front {
		position: relative;
		color: rgb(255, 177, 3);
		font-size: 36rpx;
		background-image: linear-gradient(to right, rgb(252, 239, 208), rgb(255, 211, 117) 72%);
		height: 64rpx;
		line-height: 64rpx;
		padding: 0 100rpx;
		box-sizing: content-box;
		clip-path: polygon( 
						20rpx 100%,
						0% 50%,
						20rpx 0%,
						calc(100% - 20rpx) 0%,
						100% 50%,
						calc(100% - 20rpx) 100%
					);
		z-index: 99;
	}
	.rights-title .back {
		position: absolute;
		left: -10rpx;
		right: -10rpx;
		top: -10rpx;
		bottom: -10rpx;
		background-image: linear-gradient(to left, rgb(255, 237, 180), rgb(255, 215, 126));
		clip-path: polygon(
						27rpx 100%,
						0% 50%,
						27rpx 0%,
						calc(100% - 27rpx) 0%,
						100% 50%,
						calc(100% - 27rpx) 100%
					);
		z-index: 9;
	}
	.rights-list {
		margin-top: 60rpx;
		display: grid;
		gap: 30rpx;
		grid-template-columns: repeat(3, 1fr);
	}
	.rights-item {
		padding: 30rpx;
		height: 260rpx;
		border-radius: 20rpx;
		background-color: #fff;
		line-height: 1.45;
		opacity: .6;
	}
	.rights-item .icon {
		width: 100%;
		height: auto;
	}
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 160rpx;
		background-color: #fff;
		display: flex;
		padding: 10rpx 30rpx;
		line-height: 1.2;
		box-sizing: content-box;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
	}
</style>